<div class="signup-page">

  <div class="loading-overlay" ng-show="$ctrl.okPressed">
    <div class="loader text-center">
      <img src="images/logomark.png" class="loader-image"/>
      <p class="loading-text">{{ 'GENERAL_PROCESSING' | translate }}</p>
    </div>
  </div>

  <div class="container">
    <div class="row text-center">
      <div class="col-md-12">
        <h1>{{'SIGNUP_TITLE' | translate}}</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel-heading">
          <ul class="nav nav-tabs">
            <li ng-class="{active: $ctrl._selectedType.type == 1}">
              <a ng-click="$ctrl.changeWalletType(1)">{{'SIGNUP_CREATE_WALLET_TITLE' | translate}}</a>
            </li>
            <li ng-class="{active: $ctrl._selectedType.type == 2}">
              <a ng-click="$ctrl.changeWalletType(2)">{{'SIGNUP_BRAIN_WALLET_TITLE' | translate}}</a>
            </li>
            <li ng-class="{active: $ctrl._selectedType.type == 3}">
              <a ng-click="$ctrl.changeWalletType(3)">{{'SIGNUP_PRIVATE_KEY_WALLET_TITLE' | translate}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="row">

      <div class="col-md-8 col-md-offset-2" ng-show="$ctrl._selectedType.type == 1">
        <!-- SIMPLE WALLET -->
        <form class="panel-body">
          <!-- WALLET NAME -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}: </label>
              </span>
              <input class="form-control"
                type="text"
                placeholder="{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.walletName"/>
            </div>
          </fieldset>
          <!-- SELECT NETWORK -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{'SIGNUP_NETWORK_SELECT' | translate}}: </label>
              </span>
              <select class="form-control"
                ng-model="$ctrl.network"
                ng-change="$ctrl.changeNetwork($ctrl.network)"
                ng-options="network.id as (network.id | toNetworkName) for network in $ctrl.networks">
                <option value="" disabled selected>{{'SIGNUP_NETWORK_SELECT' | translate}}</option>
              </select>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSWORD' | translate }}: </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_SIGNUP_PASSWORD_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.password"/>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD CONFIRM -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSWORD_CONFIRM' | translate }}: </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_CONFIRM_PASSWORD_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.confirmPassword"/>
            </div>
          </fieldset>
          <!-- SIMPLE WALLET WARNING -->
          <p class="bg-info">
            <i class="fa fa-exclamation-triangle"></i>
            <span ng-bind-html="'SIGNUP_CREATE_WALLET_WARNING' | translate"></span>
          </p>
          <button class="btn btn-success pull-xs-right"
            type="submit" ng-click="$ctrl.createWallet()">
            {{'SIGNUP_CREATE_WALLET_BUTTON' | translate}}
          </button>
        </form>
      </div>

      <div class="col-md-8 col-md-offset-2" ng-show="$ctrl._selectedType.type == 2">
        <!-- BRAIN WALLET -->
        <form class="panel-body">
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}: </label>
              </span>
              <input class="form-control"
                type="text"
                placeholder="{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.walletName" />
            </div>
          </fieldset>
          <!-- SELECT NETWORK -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{'SIGNUP_NETWORK_SELECT' | translate}}: </label>
              </span>
              <select class="form-control" ng-model="$ctrl.network" ng-change="$ctrl.changeNetwork($ctrl.network)" ng-options="network.id as (network.id | toNetworkName) for network in $ctrl.networks"><option value="" disabled selected>{{'SIGNUP_NETWORK_SELECT' | translate}}</option></select>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSPHRASE_FIELD_PLACEHOLDER' | translate }}: </label>
              </span>
              <input class="form-control"
                type="{{!$ctrl.showPassword ? 'password' : 'text'}}"
                placeholder="{{'FORM_PASSPHRASE_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.password" ng-change="$ctrl.updatePasswordStrengthInfo()"/>
              <span class="input-group-addon" ng-click="$ctrl.showPassword ? $ctrl.showPassword = false : $ctrl.showPassword = true">
                <span ng-show="!$ctrl.showPassword"><i class="fa fa-eye"></i></span>
                <span ng-show="$ctrl.showPassword"><i class="fa fa-eye-slash"></i></span>
              </span>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD CONFIRM -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSPHRASE_CONFIRM' | translate }}: </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_CONFIRM_PASSPHRASE_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.confirmPassword" />
            </div>
          </fieldset>
          <!-- BRAIN WALLET WARNING -->
          <p class="bg-info">
            <i class="fa fa-exclamation-triangle"></i>
            <span ng-bind-html="'SIGNUP_BRAIN_WALLET_WARNING' | translate"></span>
          </p>
          <!-- PASSWORD STRENGTH -->
          <div class="col-md-12 bg-info" ng-show="$ctrl.formData.password.length" style="margin: 0 0 10px;">
            <div class="col-md-4">
              <span style="display: block;"><b><u>{{ 'SIGNUP_ESTIMATED_PASSPHRASE_STRENGTH' | translate }}</u></b></span>
              <br>
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': ($ctrl.passwordStrengthInfo.score * 12.5) + '%' }">
                  <span>{{$ctrl.passwordStrengthInfo.score}} / 4</span>
                </div>
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': $ctrl.formData.password.length < 40 ? ($ctrl.formData.password.length * 1.25) + '%' : '50%' }">
                  <span>{{$ctrl.formData.password.length}} / 40</span>
                </div>
              </div>
              <div>
                <div style="width:40%;background-color:#d9534f;display:inline-block;">{{ 'GENERAL_SCORE' | translate }}</div>
                <div style="width:40%;background-color:#5cb85c;display:inline-block;">{{ 'GENERAL_LENGTH' | translate }}</div>
              </div>
            </div>
            <div class="col-md-4">
              <span style="display: block;"><b><u>{{ 'SIGNUP_ESTIMATED_GUESS_TIMES' | translate }}</u></b></span>
              <br>
              <ul style="text-align: left;">
                <li><b>10  / second</b>: {{$ctrl.passwordStrengthInfo.crack_times_display.online_no_throttling_10_per_second}}</li>
                <li><b>10k / second</b>: {{$ctrl.passwordStrengthInfo.crack_times_display.offline_slow_hashing_1e4_per_second}}</li>
                <li><b>10B / second</b>: {{$ctrl.passwordStrengthInfo.crack_times_display.offline_fast_hashing_1e10_per_second}}</li>
              </ul>
            </div>
            <div class="col-md-4" ng-show="$ctrl.passwordStrengthInfo.feedback.warning.length">
              <span style="display: block;"><b><u>{{ 'GENERAL_WARNING' | translate }}</u></b></span>
              <br>
              <span>{{$ctrl.passwordStrengthInfo.feedback.warning}}</span>
            </div>
            <!--<div ng-show="$ctrl.passwordStrengthInfo.feedback.suggestions.length">
              <span><b><u>Suggestions</u></b></span>
              <ul ng-repeat="x in $ctrl.passwordStrengthInfo.feedback.suggestions">
                <li> {{x}} </li>
              </ul>
            </div>-->
          </div>
          <!-- CONFIRM BUTTON -->
          <button class="btn btn-success pull-xs-right"
            type="submit" ng-click="$ctrl.createBrainWallet()">
            {{'SIGNUP_BRAIN_WALLET_BUTTON' | translate}}
          </button>
        </form>
      </div>

      <div class="col-md-8 col-md-offset-2" ng-show="$ctrl._selectedType.type == 3">
        <!-- PRIVATE KEY WALLET -->
        <form class="panel-body">

          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}: </label>
              </span>
              <input class="form-control"
                type="text"
                placeholder="{{'FORM_WALLET_NAME_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.walletName" />
            </div>
          </fieldset>
          <!-- PRIVATE KEY OF ADDRESS TO ADD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_PRIVATE_KEY_FIELD_PLACEHOLDER' | translate}}: </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_PRIVATE_KEY_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.privateKey" ng-change="$ctrl.generateAddress();" />
            </div>
          </fieldset>
          <!-- ADDRESS TO ADD -->
          <fieldset class="form-group" ng-show="$ctrl.formData.address.length">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_ADDRESS_FIELD_PLACEHOLDER' | translate}}: </label>
              </span>
              <input class="form-control"
                type="text"
                ng-model="$ctrl.formData.address" readOnly/>
            </div>
          </fieldset>
          <!-- SELECT NETWORK -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label for="namespaceParent" class="control-label">{{'SIGNUP_NETWORK_SELECT' | translate}}: </label>
              </span>
              <select class="form-control"
                ng-model="$ctrl.network"
                ng-change="$ctrl.changeNetwork($ctrl.network);$ctrl.generateAddress();"
                ng-options="network.id as (network.id | toNetworkName) for network in $ctrl.networks">
                <option value="" disabled selected>{{'SIGNUP_NETWORK_SELECT' | translate}}</option>
              </select>
            </div>
          </fieldset>
          <!-- PASSWORD FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSWORD' | translate }}: </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_SIGNUP_PASSWORD_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.password" />
            </div>
          </fieldset>
          <!-- PASSWORD FIELD CONFIRM -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'FORM_PASSWORD_CONFIRM' | translate }}:  </label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{'FORM_CONFIRM_PASSWORD_FIELD_PLACEHOLDER' | translate}}"
                ng-model="$ctrl.formData.confirmPassword" />
            </div>
          </fieldset>
          <!-- PRIVATE KEY WALLET WARNING -->
          <p class="bg-info">
            <i class="fa fa-exclamation-triangle"></i>
            <span ng-bind-html="'SIGNUP_PRIVATE_KEY_WALLET_WARNING' | translate"></span>
          </p>
          <!-- CONFIRM BUTTON -->
          <button class="btn btn-success pull-xs-right"
            type="submit"
            ng-click="$ctrl.createPrivateKeyWallet()">
            {{'SIGNUP_PRIVATE_KEY_WALLET_BUTTON' | translate}}
          </button>
        </form>
      </div>

    </div>
  </div>
  <a id="downloadWallet" target="_blank"></a>

</div>

<!-- Modal -->
<div id="safetyModal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width:900px;">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"> {{ 'SIGNUP_COMMON_WALLET_WARNING_TITLE' | translate }}</h4>
      </div>
      <div class="modal-body">
        <p><i class="fa fa-exclamation-triangle"></i> <span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_1' | translate "></span></p>
          <hr style="border-color:#444;">
          <p><span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_2' | translate"></span></p>
          <p><span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_3' | translate"></span></p>
          <div class="form-group">
            <button type="button" class="btn btn-success" ng-click="!$ctrl.showRawWallet ? $ctrl.showRawWallet = true : $ctrl.showRawWallet = false">{{ 'SIGNUP_COMMON_WALLET_WARNING_BTN_1' | translate }}</button>
          </div>
          <div ng-show="$ctrl.showRawWallet">
            <pre style="color: white;background-color: #444;font-weight: bold;"><code>{{ $ctrl.rawWallet }}</code></pre>
            <p class="bg-info"><i class="fa fa-info-circle"></i> <span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_BTN_1_INFO' | translate"></span></p>
            <hr style="border-color:#444;">
         </div>
          <p> <span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_4' | translate"></span></p>
          <div class="form-group">
           <button type="button" class="btn btn-success" ng-click="!$ctrl.showWalletPrivateKey ? $ctrl.showWalletPrivateKey = true : $ctrl.showWalletPrivateKey = false;">{{ 'SIGNUP_COMMON_WALLET_WARNING_BTN_2' | translate }}</button>
          </div>
           <div ng-show="$ctrl.showWalletPrivateKey">
            <pre style="color: white;background-color: #444;font-weight: bold;"><code>{{ $ctrl.walletPrivateKey }}</code></pre>
            <p class="bg-info"><i class="fa fa-info-circle"></i> <span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_BTN_2_INFO' | translate"></span></p>
            <hr style="border-color:#444;">
          </div>
          <p><span ng-bind-html="'SIGNUP_COMMON_WALLET_WARNING_6' | translate"></span></p>
          <hr style="border-color:#444;" ng-show="!$ctrl.showWalletPrivateKey">
          <p><i class="fa fa-exclamation-triangle"></i> {{ 'SIGNUP_COMMON_WALLET_WARNING_5' | translate }}</p>
          <br>
          <fieldset class="row checkboxes text-center form-group">
            <input type="checkbox" id="box1" ng-model="$ctrl.haveWalletFile">
            <label class="checkbox-inline" for="box1"><b>{{ 'SIGNUP_COMMON_WALLET_WARNING_CONFIRM_1' | translate }}</b></label>
            <input type="checkbox" id="box2" ng-model="$ctrl.havePrivateKeySaved">
            <label class="checkbox-inline" for="box2"><b>{{ 'SIGNUP_COMMON_WALLET_WARNING_CONFIRM_2' | translate }}</b></label> 
          </fieldset>
          <br>
         <p class="text-center"><b>{{ 'SIGNUP_COMMON_WALLET_WARNING_FOOTER' | translate }}</b></p>  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal" ng-disabled="!$ctrl.haveWalletFile || !$ctrl.havePrivateKeySaved" ng-click="$ctrl.redirect()">{{ 'SIGNUP_COMMON_WALLET_WARNING_CONFIRM_3' | translate }}</button>
      </div>
    </div>

  </div>
</div>
